<template>
  <view>
    <div class="police">
      <uni-notice-bar show-close single text="电话剩余0次，短信剩余63次，去查看" />
      <div class="row" v-for="(item, index) in policeList" :key="index">
        <uni-row>
          <uni-col :span="4">
            <view>
              <image :src="item.img"></image>
            </view>
          </uni-col>
          <uni-col :span="item.set == '0' ? 20 : 15">
            <view class="middle">
              <p>{{ item.label }}</p>
              <p style="margin-top: 15rpx">{{ item.text }}</p>
            </view>
          </uni-col>
          <uni-col :span="item.set == '0' ? 0 : 5">
            <view class="demo-uni-col dark">
              <div v-show="item.set == '1'" class="speedometer">
                <div>30 km/h</div>
              </div>
              <div v-show="item.set == '2'" class="speedometer" @click="switchClick(item)">
                <div>设置</div>
              </div>
            </view>
          </uni-col>
        </uni-row>
        <div class="flex">
          <div class="flexDiv">
            <!-- <switch color="#4e6bb9" style="transform: scale(0.65)">短信报警</switch> -->
          </div>
          <div class="flexDiv">
            <!-- <switch color="#4e6bb9" style="transform: scale(0.65)">电话报警</switch> -->
          </div>
          <div class="flexDiv">
            <switch
              color="#4e6bb9"
              label="报警"
              style="transform: scale(0.65)"
              :checked="item.switchValue"
              v-if="!item.disabled"
              @change="onSwitchChange(index, $event)"
              >APP报警</switch
            >
            <span v-else style="font-size: 13px; margin-right: 10px; color: #ff8c00"
              >请先设置电子围栏距离</span
            >
          </div>
        </div>

        <!-- <uni-row>
          <uni-col :span="8" style="margin: 0; padding: 0">
            <switch color="#FFCC33" style="transform: scale(0.7)">短信报警</switch>
          </uni-col>
          <uni-col :span="8">
            <view>
              <switch checked color="#FFCC33" style="transform: scale(0.7)">电话报警</switch>
            </view>
          </uni-col>
          <uni-col :span="8">
            <view>
              <switch checked color="#FFCC33" style="transform: scale(0.7)">APP报警</switch>
            </view>
          </uni-col>
        </uni-row> -->
      </div>
    </div>
  </view>
  <!-- 自定义底部栏 -->
  <CustomTabBar />
</template>

<script setup>
import CustomTabBar from '@/components/CustomTabBar.vue'
import {
  openState,
  openElectronicFenceInformation,
  closeElectronicFenceInformation,
} from '@/services/callPolice'
import { ref, onMounted, reactive } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'

import { useTabParamsStore } from '@/stores/modules/shebei'
const policeList = reactive([
  {
    label: '超速报警',
    text: '超过设置时速持续 30秒，触发报警。',
    img: '../../static/images/cs.png',
    set: '1',
    switchValue: false,
    disabled: false,
    // img: new URL('@/static/images/超速预警.png', import.meta.url).href,
  },
  {
    label: '离线报警',
    text: '设备离线超过 20分钟,触发报警',
    img: '../../static/images/leave.png',
    set: '0',
    switchValue: false,
    disabled: false,
  },
  {
    label: '围栏报警',
    text: '进出设置的围栏，立即触发报警。',
    img: '../../static/images/wl.png',
    set: '2',
    switchValue: false,
    disabled: false,
  },
  {
    label: '出省市报警',
    text: '出设置的省市，立即触发报警。',
    img: '../../static/images/sf.png',
    set: '2',
    switchValue: false,
    disabled: false,
  },
  {
    label: '电压过高报警',
    text: '外电压高于额定电压并持续8秒，触发报警。',
    img: '../../static/images/dcdy.png',
    set: '0',
    switchValue: false,
    disabled: false,
  },
])
const tabParamsStore = useTabParamsStore()
const id = ref('')
// const switchValue = ref(false)
const switchClick = (val) => {
  console.log(val, '--')
  if (val.set == '2') {
    uni.navigateTo({
      url: '/pages/map-fence/map-fence', // 目标页面路径
    })
  }
}
// 拿值
onShow(() => {
  if (tabParamsStore.params) {
    id.value = tabParamsStore.params.imei
    // 使用参数
    console.log('接收到的参数:', tabParamsStore.params)
    // 清空参数（避免重复使用）
    // tabParamsStore.clearParams()
    getState(id.value)
  }
})
onMounted(() => {})
// 是否有开启按钮
// const getState = async (id.value) => {
//   const res = await openState(val)
//   console.log(res);
// }
const getState = async (val) => {
  const res = await openState(val)
  console.log(res.data)

  policeList.map((item, index) => {
    if (item.label == '围栏报警') {
      if (res.data) {
        console.log('00')

        item.switchValue = res.data == '1' ? true : false
      } else {
        item.disabled = true
      }
    }
  })
  console.log(res)
}
const onSwitchChange = (index, e) => {
  console.log(e.detail.value)
  if (index == 2) {
    if (e.detail.value) {
      open(id.value)
    } else {
      close(id.value)
    }
  }
}
// 开
const open = async (val) => {
  const res = await openElectronicFenceInformation(val)
  console.log(res)
}
// 关
const close = async (val) => {
  const res = await closeElectronicFenceInformation(val)
  console.log(res)
}
</script>

<style>
.row {
  margin: 20rpx;
  height: 230rpx;
  background-color: #ffffff; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
}
.uni-row {
  padding: 16px; /* 内边距 */
  width: 100%;
}
.police image {
  width: 80rpx;
  height: 80rpx;
}
.middle :nth-child(1) {
  font-size: 14px;
  letter-spacing: 1rpx;
}
.middle :nth-child(2) {
  font-size: 12px;
  color: #989898;
}
.speedometer {
  width: 150rpx;
  height: 60rpx;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  border: 1px solid #e2e2e2;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}
.flex {
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  /* align-items: flex-end; */
}
/* .flexDiv {
  padding: 0;
  margin: 0;
  width: 230rpx;
  border-radius: 50rpx;
  height: 60rpx;
  border: 1px solid #e2e2e2;
} */
</style>
